<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		padding: 0;
		margin: 0;
	}

.box{
	/*width: 400px;*/
	height: 300px;
	border: 1px solid #000;
}
.top{
	height:50px;
	line-height: 50px;
}
.top ul{
	display: flex;
}
.top ul li{
	width: 24%;
	list-style: none;
	height: 50px;
	text-align: center;
	border-right: 1px solid #000;
	color: #ccc;
	float: left;
	cursor: pointer;
	flex: 1;

}
.top ul li.bgc{
	background-color:red;
}
.bottom{
	height: 250px;
}
.bottom ul{
}
.bottom ul li{
	list-style: none;
	width: 100%;
	height: 250px;
	float: left;
	display: none;
	background-color:red;

}
.bottom ul li.show{
	display: block;
}

	</style>
</head>
<body>
	<div class="box">

		<div class="top" id="one">
			<ul>
				<li class="bgc">首页</li>
				<li>导航</li>
				<li>新闻</li>
				<li>更多</li>
			</ul>
		</div>
		<div class="bottom" id="two">

			<ul>
				<li class="show">首页内容</li>
				<li>导航内容</li>
				<li>新闻内容</li>
				<li>更多内容</li>
			</ul>
		</div>

	</div>
</body>
<script src="./jquery-1.12.4.js"></script>
<!-- <script>

$(".top ul li").click(function(){
	$(".top ul li").removeClass("bgc");
	$(this).addClass("bgc");

	var index = $(this).index();

	$(".bottom ul li").eq(index).show().siblings().hide();

})

</script> -->

<!-- 原生js实现 -->

<script>

var  ulFirst = document.getElementById("one");

var  ulTwo = document.getElementById("two");

var liArrTop =ulFirst.getElementsByTagName("li");

var liArrBot = ulTwo.getElementsByTagName("li");

	



for(var i =0;i<liArrTop.length;i++){

	liArrTop[i].setAttribute("index",i);
	liArrTop[i].onclick = function(){
		//里面所有的li标签全部移除类样式
		
		for(var j=0;j<liArrTop.length;j++){
			//移除类属性
			liArrTop[j].removeAttribute("class");
		}

		//当前的添加类样式
		this.className = "bgc";

		console.log(this.getAttribute("index"));

		var num = this.getAttribute("index");

		//获取所有的bottom中的li标签 先隐藏每个li标签
		//
		for(var k=0;k<liArrBot.length;k++){
			liArrBot[k].removeAttribute("class");
		}

		liArrBot[num].className = "show";




	}

}
//第二遍
//
//
//1.先循环添加点击事件
for(var i=0;i<liArrTop.length;i++){
	liArrTop[i].setAttribute("index",i);
	liArrTop[i].onclick=function(){
		//让liArrTop里面的每一个li标签先移除类样式 在添加当前的
		for(var j=0;j<liArrTop.length;j++){
			liArrTop[j].removeAttribute("class");
		}
		this.className = "bgc";


		alert(this.getAttribute("index"));

		var num = this.getAttribute("index");

		for(var k=0;k<liArrBot.length;k++){
			liArrBot[k].removeAttribute("class");
		}
		liArrBot[num].className = "show";
	}

	//下面的li根据上面的索引值显示和隐藏
	
}



</script>

</html>